<template>
   <vp-main-page @refresh="loadDataList">
	<template #search>
			<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label-keyword/></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="handleSearch"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<el-space>
				<el-upload v-auth="'systemWorkflowmodel.edit'"
					:action= "uploadAction"
					:on-success="handleUploadSuccess"
					:show-file-list="false"
					:headers="headers"
					:multiple=true
				>
					<vp-btn ><vp-label zh="上传" en="Upload"/></vp-btn>
				</el-upload>
				<vp-btn-add v-auth="'systemWorkflowmodel.edit'"  @click="handleAddModeler"/>
			</el-space>
		</template>
		<template #table>
			<vp-table ref="tableRef" :data="tableFilterData" @sort-change="handleSortChange"   stripe border  style="width: 100%" row-key="id">
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column prop="key" width="300" show-overflow-tooltip>
					<template #header><vp-label zh="Key" en="Key"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.key)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('workflow.model.name')" prop="name" min-width="300" show-overflow-tooltip>
					<template #header><vp-label zh="名称" en="Name"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.name)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('workflow.model.version')" prop="version" width="100" show-overflow-tooltip>
					<template #header><vp-label zh="版本" en="Version"/></template>
				</el-table-column>
				<el-table-column :label="$t('item.operations')" fixed="right" width="260">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn text @click="hanldeView(scope.row)"><vp-label zh="查看" en="View"/></vp-btn>
							<vp-btn type="text" v-auth="'systemWorkflowmodel.edit'" @click="hanldeModeler(scope.row)"><vp-label zh="编制模型" en="Edit Modeler"/></vp-btn>
							<vp-btn-del text v-auth="'systemWorkflowmodel.edit'" @click="handleDelete(scope.row)"/>
							<vp-btn type="text" v-auth="'systemWorkflowmodel.edit'" @click="handleView(scope.row)"><vp-label zh="流程实例" en="Process Instance"/></vp-btn>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<EditWorkflowmodel @form-submited="loadDataList" ref="editWorkflowmodelRef"></EditWorkflowmodel>
		<ViewWorkflowmodel ref="viewWorkflowmodelRef"></ViewWorkflowmodel>
		<AddModeler ref="addModelerRef" @form-submited="loadDataList"></AddModeler>
		<ProcessInstance ref="processInstanceRef"></ProcessInstance>
	</vp-main-page>
</template>
<script setup lang="ts" name="workflowModel">
import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import { DEFAULT_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import { Session } from '/@/utils/storage';
import { markTextColor } from '/@/utils/toolsValidate';

	const EditWorkflowmodel = defineAsyncComponent(() => import('./component/EditWorkflowmodel.vue'));
	const ViewWorkflowmodel = defineAsyncComponent(() => import('./component/ViewWorkflowmodel.vue'));
	const AddModeler = defineAsyncComponent(() => import('./component/AddModeler.vue'));
	const ProcessInstance = defineAsyncComponent(() => import('./component/ProcessInstance.vue'));

	const tableData = ref([]);
	const loading = ref(false);

	const headers = ref({token: Session.get("token")});
	const showMore = ref(false);
	const searchForm = reactive({
		keyword: "",
	});
	const page = reactive({
		...DEFAULT_PAGE,
	})

	const tableFilterData = computed(()=>{
			return tableData.value.filter((data:any)=>{
                return !searchForm.keyword || data.key.toLowerCase().includes(searchForm.keyword.toLowerCase())
                || (data.name && data.name.toLowerCase().includes(searchForm.keyword.toLowerCase()))
            })
		})
		
		const loadDataList = () => {
			loading.value = true;
			request.get('/workflow/modeler/list', {
				params: {
					...searchForm,
					...page,
				}
			}).then(res => {
				tableData.value = res?.data || [];
				page.total = res?.data?.total || 0;
				page.pageNum = res?.data?.pageNum || 1;
			}).finally(()=>{
				loading.value = false;
			})	
		}

		const searchFormRef = ref();

		const handleSearch = ()=>{
			if(page.pageNum == 1){
				loadDataList();
			}else{
				page.pageNum = 1
			}
		}
		const handleSearchReset = ()=>{
			searchFormRef.value.resetFields();
		}
		const handleSortChange = (column: any)=>{
			page.sortColumn = column.prop;
			page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
			loadDataList();
		}
		onMounted(() => {
			loadDataList();
		})

		//模型上传的路径
		const uploadAction =  import.meta.env.VITE_API_URL + "/workflow/modeler/deploy";
		
		const handleUploadSuccess = ()=>{
			loadDataList();
		}

		const editWorkflowmodelRef = ref();
		//打开流程模型设计器
		const hanldeModeler = (row: any) => {
			editWorkflowmodelRef.value.handleOpen(row.id, row.name);
		}

		const viewWorkflowmodelRef = ref();
		const hanldeView = (row: any) => {
			viewWorkflowmodelRef.value.handleOpen(row.id, row.name);
		}

		const addModelerRef = ref();
		const handleAddModeler = ()=>{
			addModelerRef.value.handleOpen();
		}

		const i18n = useI18n();

		const handleDelete = (row: any)=>{
			VpMessageBox.confirmDelete().then(()=>{
				request.delete(`/workflow/modeler/${row.id}`).then(res => {
					loadDataList();
				})
			});
		}

		const processInstanceRef = ref();
		const handleView = (row: any)=>{
			processInstanceRef.value.handleOpen(row.key);
		}

</script>
